<template>
  <!-- <div class="star" :class="`star-${size}`">
    
    <span class="star-item" v-for='(c,index) in StarClass' :key="index" :class="c"></span>

     <span class="star-item on"></span>
    <span class="star-item on"></span>
    <span class="star-item on"></span>
    <span class="star-item half"></span>
    <span class="star-item off"></span> 
  </div> -->



<div class="star" :class="`star-${size}`">
    <span class="star-item" v-for='(c,index) in StarClass' :key="index" :class="c"></span>
</div>

</template>

<script>
const  ON='on'
const  HALF='half'
const  OFF='off'
export default {
  props: {
      score:{
          type:Number
      },
      size:{
          type:Number
      }
  },
  data() {
    return {};
  },
  computed: {
      //ON代表全星  HALF代表半星  OFF代表没有高亮的星星
    StarClass() {
       let starArr = [];
      //依据评价来计算星星的个数 score=3.2
      let {score} = this;
      //假设intNum=3
      let intNum = Math.floor(score);
      console.log(intNum);
      
      for (var i = 0; i < intNum; i++) {
        starArr.push(ON);
  
      }

      //在js里面 0.1+0.2 不等于0.3  0.2-0.1！=0.1
      //在js里面尽量不要直接用小数进行运算，采用整数进行计算，更加严谨。
      //3.2*10-3*10=2
      //除掉整数位，小数位*10，判断大于5还是小于5   
      //这里的是>5 如果大于或者等于5就走这里的代码
      if ((score * 10 - intNum * 10)>=5) {
        starArr.push(HALF);
      }
      while (starArr.length < 5) {
         //2<5就走下面 那么就没有高亮就是灰色的星星
        starArr.push(OFF);
      }
      return starArr;
    }
    
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {},
  components: {}
};
</script>

<style scoped lang="stylus" >
@import '../../common/stylus/mixins.styl'
 
                    .star //2x图 3x图
                      float left
                      font-size 0
                      .star-item
                        display inline-block
                        background-repeat no-repeat
                      &.star-48
                        .star-item
                          width 20px
                          height 20px
                          margin-right 22px
                          background-size 20px 20px
                          &:last-child
                            margin-right: 0
                          &.on
                            bg-image('./images/stars/star48_on')
                          &.half
                            bg-image('./images/stars/star48_half')
                          &.off
                            bg-image('./images/stars/star48_off')
                      &.star-36
                        .star-item
                          width 15px
                          height 15px
                          margin-right 6px
                          background-size 15px 15px
                          &:last-child
                            margin-right 0
                          &.on
                            bg-image('./images/stars/star36_on')
                          &.half
                            bg-image('./images/stars/star36_half')
                          &.off
                            bg-image('./images/stars/star36_off')
                      &.star-24
                        .star-item
                          width 10px
                          height 10px
                          margin-right 3px
                          background-size 10px 10px
                          &:last-child
                            margin-right 0
                          &.on
                            bg-image('./images/stars/star24_on')
                          &.half
                            bg-image('./images/stars/star24_half')
                          &.off
                            bg-image('./images/stars/star24_off')

</style>
